<template>
	<view class="backBox">
		<navBar back-judge title="确认订单"></navBar>
		<view class="timeBox">
			<view class="time">支付剩余时间:00:{{m}}:{{s}}</view>
		</view>
		<view class="title"><span style="font-size: 12px;">￥</span>{{price || 0.00}}</view>
		<view class="checkBox">
			<view class="labelBox">
				<view class="label">
					<image class="img" mode="aspectFit"
						src="https://gd-hbimg.huaban.com/3b865314c9f832fa7ea6cf2ee89acc13894461778d14-EqVntA_fw658webp">
					</image>
					<view class="tips">微信支付</view>
				</view>
				<view class="check">
					<view class="act"></view>
				</view>
			</view>
		</view>
		<view class="button" @click="pay">支付</view>
	</view>
</template>

<script>
	import navBar from '../../components/navbars/navbars.vue'
	import {createPay} from '@/utils/API.js'
	export default {
		data() {
			return {
				m: 29,
				s: 60,
				timer: '',
				data: {},
				price: 0.00,
				payment: '',
				orderId: '',
				lookid:''
			}
		},
		components:{
			navBar
		},
		onLoad(e) {
			console.log('e',e);
			if(e.lookid){
				this.lookid = e.lookid
			}
			this.id = e.id
			this.price = e.price
			this.data = JSON.parse(e.data)
			console.log('this.data',this.data.orderNo)
			this.timer = setInterval(() => {
				this.s--
				if (this.s == 0) {
					this.s = 60
					this.m--
					if (this.m == 0) {
						clearInterval(this.timer)
					}
				}
			}, 1000)
		},
		methods: {
			async pay() {
				var that = this
				const res = await createPay(that.data)
				if(res.code==200){
					var data = {
						...JSON.parse(res.data.payData)
					}
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: data.nonceStr,
						package: data.package,
						paySign: data.paySign,
						signType: data.signType,
						timeStamp: data.timeStamp,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							console.log(that.data,'that.data');
							if(that.lookid){
								uni.redirectTo({
									url: `/pages-detail/finy/finy?id=${that.lookid}`
								})
							}else{
								uni.redirectTo({
									url: `/pages-detail/finy/finy?id=${that.id}`
								})
							}
							
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}
				
			},
			orderPay() {

			}
		},
	
	}
</script>

<style lang="scss" scoped>
	.button {
		position: fixed;
		bottom: 20px;
		left: 0px;
		width: calc(100vw - 80px);
		border-radius: 50px;
		text-align: center;
		font-weight: bold;
		padding: 10px;
		margin: 10px 30px;
		color: white;
		background-color: dodgerblue;
	}

	.backBox {
		background-color: $MainBackColor;
		min-height: 100vh;
	}

	.checkBox {
		background-color: white;
		margin: 20px;
		padding: 20px;
		border-radius: 10px;

		.labelBox {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				display: flex;
				align-items: center;

				.tips {
					font-size: 14px;
					margin-left: 5px;
				}

				.img {
					width: 20px;
					height: 20px;
				}
			}

			.check {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				border: 2px solid $grey;
				display: flex;
				align-items: center;
				justify-content: center;

				.act {
					border-radius: 50%;
					width: 8px;
					height: 8px;
					background-color: $grey;
				}
			}
		}
	}

	.timeBox {
		padding-top: 30px;
		display: flex;
		justify-content: center;
		color: $grey;
		font-size: 14px;
	}

	.title {
		font-weight: bold;
		font-size: 25px;
		text-align: center;
		color: $red;
		margin: 5px 0px;
	}
</style>